﻿@model TestWim.TestWimCL.POCO.Meeting

@{
    ViewBag.Title = "Details";
}
<script type="text/javascript">
    google.load('visualization', '1.1', { packages: ['controls','corechart'] });
    google.setOnLoadCallback(function () {
        var data=[];
        var gDT=new google.visualization.DataTable();
        var addedColumns=false;
        @foreach (KeyValuePair<TestWim.TestWimCL.POCO.Event,List<TestWim.TestWimCL.POCO.Result>> kvp in ViewBag.GraphData) {
            <text>
            if (!addedColumns) { gDT.addColumn("string","Event"); }
            var datarow=["@kvp.Key.Name"];</text>
            foreach (TestWim.TestWimCL.POCO.Result r in kvp.Value) {
                <text>if (!addedColumns) { gDT.addColumn("number","@r.Student.Name"); gDT.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); }
                datarow.push(@r.ResultValue);
                datarow.push('<div style="padding:5px 5px 5px 5px;">' + '<dl><dt>Event</dt><dd>@kvp.Key.Name</dd><dt>Student</dt><dd>@r.Student.Name</dd>'
                    + '<dt>Result</dt><dd>@r.ResultValue</dd><dt>Team</dt><dd>@r.Team.Name</dd></dl></div>');</text>
            }
            <text>if (!addedColumns) { addedColumns=true; }
            data.push(datarow);</text>
        }
        
        gDT.addRows(data);

        var dashboard = new google.visualization.Dashboard(document.getElementById('chartDashboard'));

        var filter = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'filter',
            'options': { 
                'filterColumnLabel': "Event", 
                 'ui': {
                    'allowTyping': false,
                    'allowMultiple': true,
                    'selectedValuesLayout': 'belowStacked'
                  } 
            },
            'state': {'selectedValues': gDT.getDistinctValues(0)}
        });

        var lineChart = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'chart',
            'options': {
                'width': 400,
                'height': 500,
                'legend': 'right',
                'title':'Resultaten van @Model.Name',
                tooltip: {isHtml: true}
            }
        });
        dashboard.bind(filter,lineChart);
        dashboard.draw(gDT);
    });
</script>
<h2>Details</h2>

<fieldset>
    <legend>Meeting</legend>

    <div class="display-label">Name</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div class="display-label">Location</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Location)
    </div>

    <div class="display-label">IsOfficial</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.IsOfficial)
    </div>

    <div class="display-label">Date</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Date)
    </div>
</fieldset>
<div id="chartDashboard" style="width:600px; height:500px;">
    <div id="chart" style="width: 400px; height: 500px; float:left;"></div>
    <div id="filter" style="width: 200px; height: 500px; float:left;"></div>
    <br style="clear:both; line-height:0" />
</div>
<table>
    <tr><th>ResultId</th><th>ResultValue</th><th>EventName</th><th>StudentName</th><th>TeamName</th></tr>
    @foreach (TestWim.TestWimCL.POCO.Result r in Model.Results)
    {
        <tr><td>@r.ResultId</td><td>@r.ResultValue</td><td>@r.Event.Name</td><td>@r.Student.Name</td><td>@r.Team.Name</td></tr>
    }
</table>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.MeetingId }) |
    @Html.ActionLink("Back to List", "Index")
</p>
